<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../../PC/css/reset.css">
	
	<style>
		.head{
		
			position: fixed;
			z-index: 2;
			width: 100vw;
			height: 0.8rem;
			display: flex;
			padding: 0 .2rem;
			box-shadow: 0px 0px 3px #999;
			background-color: #fff;
		}
		.head>span{
			display: inline-block;
			height: 0.8rem;
			line-height: 0.8rem;
			width: .6rem;
		}
		.head>div{
			width: 78vw;
			height: 0.8rem;
			text-align: center;
			line-height: 0.8rem;
			font-size: .4rem;
			font-weight: 700;
		}
		.goods_info{
			padding: 1rem 0.4rem 0.4rem 0.4rem;
		}
		.goods_info>div{
			line-height: .6rem;
		}
		.pinpai{
			position: relative;
			padding-bottom: .2rem;
		}
		.pinpai>span{
			display: inline-block;
			width: 1.5rem;
			text-align: right;
		}
		.pinpai input{
			width: 63vw;
			height: .4rem;
			border-bottom: 1px solid #dfdbdb;
		}
		.pinpai::after{
			position: absolute;
			right: 0.7rem;
    		top: .2rem;
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			border: .15rem solid #000;
			border-color: #000 transparent transparent transparent;
		}
		.yanse{
			position: relative;
			padding-bottom: .2rem;
		}
		.yanse>span{
			display: inline-block;
			width: 1.5rem;
			text-align: right;
		}
		.yanse input{
			width: 63vw;
			height: .4rem;
			padding-left: .3rem;
			border-bottom: 1px solid #dfdbdb;
		}
		.address span{
			display: inline-block;
			text-align: right;
			width: 1rem;
		}
		.address input{
			width: 1.05rem;
			border-bottom: 1px solid #d4d3d3;
		}
		.pic{
			display: flex;
			align-items: center;
		}
		.pic>span{
			display: inline-block;
			text-align: right;
			width: 1.05rem;
			margin-right: .3rem;
		}
		.pic>.add{
			width: 1.5rem;
			height: 1.5rem;
			border: 1px solid #dddbdb;
			text-align: center;
			line-height: 1.4rem;
			font-size: 1rem;
		}
		.submit-btn{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn{
			width: 1.8rem;
			height: 0.7rem;
			text-align: center;
			line-height: 0.7rem;
			font-size: 0.3rem;
			background-color: none;
			border: 1px solid;
			margin-top: .5rem;
			border-radius: .3rem;
		}
		.popupNeiCun,.popupPeiSong{
			position: fixed;
			height: 0;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0px 0px 6px #d8d6d6;
			transition: all 0.3s linear;
			overflow: scroll;
		}
		.popupPeiSong ul{
			padding: 0 .2rem;
		}
		.popupPeiSong ul{
			padding: 0 .2rem;
		}
		.popupPeiSong ul li{
			text-align: center;
			height: .7rem;
			line-height: .7rem;
			border-bottom: 1px solid #ebe8e8;
		}
		.popupNeiCun ul li{
			text-align: center;
			height: .7rem;
			line-height: .7rem;
			border-bottom: 1px solid #ebe8e8;
		}
		.PPMain,.XHMain{
			position: fixed;
			width: 100vw;
			max-height: 60vh;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0 0 3px 0px #999;
			overflow-y: scroll;
			padding: .2rem;
			display: none;
		}
		.PPMain li{
			display: flex;
			justify-content: center;
			padding: .2rem 0;
		}
		.XHMain li{
			display: flex;
			justify-content: center;
			padding: .2rem 0;
		}
		.XHMain li+li{
			border-top: 1px solid rgb(238, 237, 237);
		}
		.PPMain li+li{
			border-top: 1px solid rgb(238, 237, 237);
		}
		#activePPName,#activeXHName,#nc,#isOpen,#isDestroy,#isCommunication,#isDisassembly,#isInvoice,#peiSong,#XinJiu{
			text-align: center;
		}
		.color{
			text-align: center;
		}
		.address input{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.addressPopup{
			/* display: flex; */
			width: 100vw;
			height: 50vh;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0 0 3px 0px rgb(204, 200, 200);
			display: none;
		}
		.addressPopup ul{
			width: 25%;
			max-height: 100%;
			background-color: aqua;
			overflow-y: scroll;
		}
		.addressPopup ul li{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: center;
			padding: .2rem 0;
		}
		.addressPopup ul li+li{
			border-top: 1px solid rgb(228, 226, 226);
		}
		.popupCS{
			position: fixed;
			height: 0;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0px 0px 6px #d8d6d6;
			transition: all 0.3s linear;
		}
		.popupCS ul{
			padding: 0 .2rem;
		}
		.popupCS ul li{
			text-align: center;
			height: .7rem;
			line-height: .7rem;
			border-bottom: 1px solid #ebe8e8;
		}
		.pic-wrap{
			display: flex;
			height: 1.5rem;
		}
		.pic-wrap img{
			width: 1.5rem;
			height: 1.5rem;
		}
		.pic-box{
			position: relative;
		}
		.close{
			position: absolute;
			width: .5rem;
			height: .5rem;
			border: 1px solid #999;
			border-radius: 50%;
			text-align: center;
			line-height: .5rem;
			top: .1rem;
			right: .1rem;
		}
		
	</style>
</head>
<body>
	<div class="head">
		<span onclick="history.back()">返回</span>
		<div>新增</div>
	</div>
	<div class="goods_info">
		<div class="pinpai">
			<span>品牌:</span>
			<input type="text" readonly id="activePPName" onclick="openPPMain()">
		</div>
		<div class="pinpai">
			<span>型号:</span>
			<input type="text" readonly onclick="openXHMain()" id="activeXHName">
		</div>
		<div class="yanse">
			<span>颜色:</span>
			<input type="text" class="color" id="color">
		</div>
		<div class="pinpai">
			<span>内存:</span>
			<input type="text" readonly onclick="openNeiCun()" id="nc">
		</div>
		<div class="pinpai">
			<span>开机:</span>
			<input type="text" readonly onclick="openStart('isOpen')" data-fildes="isOpen" id="isOpen">
		</div>
		<div class="pinpai">
			<span>账户可注销:</span>
			<input type="text" readonly onclick="openStart('isDestroy')" data-fildes="isDestroy" id="isDestroy">
		</div>
		<div class="pinpai">
			<span>可接打电话:</span>
			<input type="text" readonly onclick="openStart('isCommunication')" data-fildes="isCommunication" id="isCommunication">
		</div>
		<div class="pinpai">
			<span>有过拆卸:</span>
			<input type="text" readonly onclick="openStart('isDisassembly')" data-fildes="isDisassembly" id="isDisassembly">
		</div>
		<div class="address">
			<span>地址:</span>
			<input type="text" readonly id="shengName">省
			<input type="text" readonly id="shiName">市
			<input type="text" readonly id="xianName">县
			<input type="text" readonly id="zhenName">
		</div>
		<div class="pinpai">
			<span>配送方式:</span>
			<input type="text" readonly onclick="openPeisong()" id="peiSong">
		</div>
		<div class="pinpai">
			<span>发票:</span>
			<input type="text" readonly onclick="openStart('isInvoice')" data-fildes="isInvoice" id="isInvoice">
		</div>
		<div class="pinpai">
			<span>新旧程度:</span>
			<input type="text" readonly onclick="openXInJiu()" id="XinJiu">
		</div>
		<div class="yanse">
			<span>配件:</span>
			<input type="text" id="peijian">
		</div>
		<div class="pic">
			<span>照片:</span>
			<div class="pic-wrap">
			</div>
			<div class="add" onclick="uploadFile()">+</div>
			<input type="file" accept="image/*" multiple name="" id="file" style="display: none;" onchange="fileChange(this)">
		</div>
		<div class="submit-btn">
			<button class="btn" onclick="submitData()">提交</button>
		</div>
	</div>
	<!-- 品牌上拉面板 -->
	<div class="PPMain">
		<ul class="list-wrap"></ul>
	</div>
	<!-- 型号上拉面板 -->
	<div class="XHMain">
		<ul class="XH-list-wrap"></ul>
	</div>
	<!-- 内存面板 -->
	<div class="popupNeiCun">
		<ul>
		</ul>
	</div>
	<!-- 配送方式面板 -->
	<div class="popupPeiSong">
		<ul>
		</ul>
	</div>
	<!-- 省市县乡 -->
	<div class="addressPopup">
		<ul></ul>
		<ul></ul>
		<ul></ul>
		<ul></ul>
	</div>
	<!-- 成色 -->
	<div class="popupCS">
		<ul>
			<li data-id="1">全新未开封</li>
			<li data-id="2">九九新</li>
			<li data-id="3">九五新</li>
			<li data-id='4'>九成新</li>
			<li data-id="5">八五新</li>
			<li data-id="6">八成新</li>
			<li data-id="7">六成新</li>
			<li data-id="8">六成以下</li>
		</ul>
	</div>
	<script src="../js/rem.js"></script>
	<script src="../../public1/js/sweetalert.js"></script>
	<script src="../../public1/js/pubilc.js"></script>
	<script src="../../public1/js/shengshixianxiang.js"></script>
<script>
	window.onload = function(){
			/*
				检验token的有效性 TODO 
			*/
			if(!splitToken('token')){
				location.replace('./login.html')
				return
			}
		}
	// 数据收集容器
	var activeData={
		ppID:'',// 品牌ID
		XHID:'',
		NCActive:'',
		isOpen:'',
		isDestroy:'',
		isCommunication:'',
		isDisassembly:'',
		isInvoice:'',
		shengID:'',
		shiID:'',
		xianID:'',
		zhenID:'',
		PSID:'',
		CS:'',
		color:'',
		peijian:'',
		pic:[]
	} 
	var _TMPXH_ =[]
	// 内存配置
	var neicun = [{structure:'4+32',id:1},{structure:"4+64",id:2},{structure:"4+128",id:3},{structure:"8+256",id:4},{structure:"8+512",id:5},{structure:"12+256",id:6},{structure:"12+512",id:7},{structure:"12+1T",id:8},{structure:"16+256",id:9},{structure:"16+512",id:10},{structure:"16+1T",id:11},{structure:"24+1T",id:12},{structure:"无",id:13}]
	// 开关机/是否拆卸/可接打电话/可注销
	var openState = [{state:'是',id:1},{state:'否',id:2}]
	// 配送方式
	var peisong = [{way:'快递',id:1},{way:'自取',id:2},{way:'可送',id:3}]
	var ppList = document.querySelector('.list-wrap')
	var neiCunPopup = document.querySelector('.popupNeiCun')
	var neiCunList = document.querySelector('.popupNeiCun ul')
	var fileEl = document.getElementById('file')
	var PPMain = document.querySelector('.PPMain')
	var XHMain = document.querySelector('.XHMain')
	var XHWrap = document.querySelector('.XH-list-wrap')
	var ncInput = document.querySelector('#nc')
	var addressObj = document.querySelector('.address')
	var addressItem = document.querySelectorAll('.addressPopup ul')
	var popupPeiSong = document.querySelector('.popupPeiSong')
	var popupPeiSongList = document.querySelector('.popupPeiSong ul')
	var popupCS = document.querySelector('.popupCS')
	var picWrap = document.querySelector('.pic-wrap')
	var addFileIcon = document.querySelector('.add')

	init()
	function init(){
		ppList.innerHTML=''
		addressItem[0].innerHTML=''
		xhr({
			url:'/pc/class/get',
			success:function(res){
				_TMPXH_ = res.data.two
				for(var i=0;i<res.data.one.length;i++){
					ppList.innerHTML+=`<li data-id=${res.data.one[i].Id} onclick=clickPP(${JSON.stringify(res.data.one[i])})>${res.data.one[i].brand_name}</li>`
				}
			}
		})
		for(var i=0;i<data.length;i++){
			addressItem[0].innerHTML+=`<li data-code=${data[i].code} onclick=shengClick(${JSON.stringify(data[i].children)},1,this)>${data[i].name}</li>`
		}
	}
	// 打开品牌面板
	function openPPMain(){
		PPMain.style.display="block"
	}
	// 打开型号面板
	function openXHMain(){
		XHMain.style.display='block'
		XHWrap.innerHTML = ''
		for(var i=0;i<_TMPXH_.length;i++){
			if(_TMPXH_[i].belong_brand==activeData.ppID){
				XHWrap.innerHTML+=`<li data-id=${_TMPXH_[i].Id} onclick=clickXH(${JSON.stringify(_TMPXH_[i])})>${_TMPXH_[i].xinghao_content}</li>`
			}
		}
	}
	function clickPP(strObj){
		activeData.ppID = strObj.Id
		activePPName.value = strObj.brand_name
		PPMain.style.display='none'
		activeXHName.value = ''
		activeData.XHID = ''
	}
	function clickXH(strObj){
		activeXHName.value = strObj.xinghao_content
		activeData.XHID = strObj.Id
		XHMain.style.display='none'
	}
	function openNeiCun(){
		neiCunList.innerHTML = ''
		neiCunPopup.style.height="34vh"
		for(var i=0;i<neicun.length;i++){
			neiCunList.innerHTML+=`<li onclick=neicunClick(${JSON.stringify(neicun[i])})>${neicun[i].structure}</li>`
		}
	}
	function neicunClick(strObj){
		activeData.NCActive = strObj.id
		ncInput.value = strObj.structure
		neiCunPopup.style.height = '0'
	}
	function openStart(fields){
		neiCunList.innerHTML = ''
		neiCunPopup.style.height="11vh"
		console.log(fields)
		for(var i=0;i<openState.length;i++){
			neiCunList.innerHTML+=`<li onclick=isOk(${JSON.stringify(openState[i])},${String(fields)})>${openState[i].state}</li>`
		}
	}
	function isOk(strObj,fields){
		activeData[fields.getAttribute('data-fildes')] = strObj.id		
		fields.value = strObj.state
		neiCunPopup.style.height="0"
	}
	function shengClick(child,n,that){
		var code = that.getAttribute('data-code')
		var elTarget = n==1?{el:shengName,fields:'shengID'}:n==2?{el:shiName,fields:'shiID'}:n==3?{el:xianName,fields:'xianID'}:{el:zhenName,fields:'zhenID'}
		elTarget.el.value = that.innerHTML
		activeData[elTarget.fields] = code
		for(var i=n;i<4;i++){
			addressItem[i].innerHTML = ''
		}
		if(n==4){
			document.querySelector('.addressPopup').style.display='none'
		}
		if(child){
			for(var i=0;i<child.length;i++){
				addressItem[n].innerHTML+=`<li data-code=${child[i].code} onclick=shengClick(${JSON.stringify(child[i].children)},${n+1},this)>${child[i].name}</li>`
			}
		}
	}
	function openPeisong(){
		popupPeiSongList.innerHTML = ''
		for(var i=0;i<peisong.length;i++){
			popupPeiSongList.innerHTML+=`<li onclick=peiSongClick(${peisong[i].id},this)>${peisong[i].way}</li>`
		}
		popupPeiSong.style.height='16vh'
	}
	function peiSongClick(id,that){
		activeData.PSID = id
		peiSong.value = that.innerHTML
		popupPeiSong.style.height='0'
	}
	function openXInJiu(){
		popupCS.style.height='42vh'
	}
	function uploadFile(){
		fileEl.click()
	}
	function submitData(){
		activeData.color = color.value
		activeData.peijian = peijian.value
		for(var key in activeData){
			if((typeof activeData[key] == 'string' && activeData[key]) || (typeof activeData[key] == 'object' && activeData[key].length)){
				xhr({
					url:'/goods/add',
					methods:"post",
					data:JSON.stringify({
						phone_brand:activeData.ppID,
						phone_type_num:activeData.XHID,
						phone_color:activeData.color,
						phone_memory:activeData.NCActive,
						phone_isOpen:activeData.isOpen,
						phone_address:`${activeData.shengID},${activeData.shiID},${activeData.xianID},${activeData.zhenID}`,
						account_logout:activeData.isDestroy,
						function_normal:activeData.isCommunication,
						disassembly_phone:activeData.isDisassembly,
						distribution_phone:activeData.peiSong,
						phone_pic:String(activeData.pic),
						peijian:activeData.peijian,
						isInvoice:activeData.isInvoice,
						chengse:activeData.XinJiu}),
					success:function(res){
						location.replace('./goodsLIst.html?token='+ splitToken('token'))
					}
				})		
			}else{
				popupMsg('warning','请完善信息')
			}
		}
		
	}
	// 读取文件  picWrap
	function fileChange(that){
		if(activeData.pic.length+that.files.length>3){
			popupMsg('warning','最多上传3张图片')
			return
		}
		for(var i=0;i<that.files.length;i++){
			var formData = new FormData()
			formData.append('file',that.files[i])
			xhr({
				url:'/user/upload',
				methods:'post',
				data:formData,
				header:{},
				success:function(res){
						var odiv = document.createElement('div')
						odiv.classList.add('pic-box')
						var img = document.createElement('img')
						var span = document.createElement('span')
						span.classList.add('close')
						span.innerHTML='X'
						img.src = res.data
						odiv.append(img)
						odiv.append(span)
						picWrap.appendChild(odiv)
						activeData.pic.push(res.data)
						if(activeData.pic.length>2){
							addFileIcon.style.display = 'none'
							
						}
						span.onclick=function(){
							var src = this.previousSibling.getAttribute('src')// 获取img的src值
							activeData.pic.splice(activeData.pic.indexOf(src),1) // 通过indexOf找到该src的索引 使用数组api删除
							addFileIcon.style.display = 'block'
							this.parentNode.remove()
						}
				}
			})
		}
	}

	window.addEventListener('click',function(e){
		if(e.target.className!='popupNeiCun'&&e.target.tagName!='INPUT'){
			neiCunPopup.style.height='0'
		}
	})
	addressObj.addEventListener('click',function(){
		document.querySelector('.addressPopup').style.display='flex'
	})
	popupCS.addEventListener('click',function(e){
		if(e.target.tagName === 'LI'){
			activeData.CS = e.target.getAttribute('data-id')
			XinJiu.value = e.target.innerHTML
			this.style.height="0"
		}
	})
</script>
</body>
</html>